<template>
  <div :class="{'search-item-list':true, 'search-item-others': state.type === 'daterange', 'search-item-checkbox': state.type === 'checkbox'}">
    <span  :class="{'search-label': true,
    'search-other-label': state.name.length > 4,
    'search-other-more': state.name.length > 5}">
      <a-tooltip :title="state.name" placement="bottom">
         {{state.name}}
      </a-tooltip>
    </span>
    <div :class="{'search-input': true, 'search-others': state.type === 'daterange'}">
      <a-select  v-if="state.type === 'select'"
                 allowClear
                 v-model:value="formData.selectVal"
                 :id="state.key"
                 style="width: 100%"
                 @change="(value) => handleChange(value,state.key)"
                 :bordered="false" :placeholder="state.placeholder" >
        <a-select-option v-for="item in state.options" :value="item.value" v-bind:key="item.value">{{item.label}}</a-select-option>
      </a-select>
      <a-cascader
          v-if="state.type === 'checkbox'"
          v-model:value="formData.cascaderVal"
          :bordered="false"
          style="width: 100%"
          :id="state.key"
          multiple
          :options="state.options"
          :placeholder="state.placeholder"
          @change="(value) => cascaderChange(value,state.key)"
      >
        <template #tagRender="data">
          <a-tag :key="data.value" color="blue">{{ data.label }}</a-tag>
        </template>
      </a-cascader>
      <a-range-picker v-if="state.type === 'daterange'"
                     :id="state.key"
                     v-model:value="formData.dateVal"
                     @change="(value) => dateChange(value,state.key)"
                     :show-time="state.valueFormat.includes('HH:mm')? { format: 'HH:mm' } : false"
                     :valueFormat="state.valueFormat"
                     style="width: 100%" :bordered="false" />
      <a-input v-if="state.type === 'text'"
               :id="state.key"
               v-model:value="formData.inputVal"
               :bordered="false"
               @change="inputChange"
               :placeholder="state.inputPlaceholder"/>
      <a-input-number v-if="state.type === 'number'"
                      v-model:value="formData.numVal"
                      :id="state.key"
                      @change="(value) => numberInputChange(value,state.key)"
                      :bordered="false" :style="{width: '100%'}"
                      :placeholder="state.inputPlaceholder"
                      :min="1"  />
      <div class="close-btn" @click="deleteInput(state)">
        <CloseOutlined />
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, watch,ref, reactive, defineEmits} from 'vue'
import {CloseOutlined } from '@ant-design/icons-vue';
const emit = defineEmits(['closeId', 'changeVal'])
const props = defineProps({
  custom: {
    type: Object,
    required: true,
    default: () => {}
  },
  isClear: {
    type: Boolean,
    default: () => false
  }
})
const formData = ref({
  inputVal: '',
  dateVal: '',
  selectVal: '',
  cascaderVal: '',
  numVal: ''
})
watch(() => props.isClear,(newVal) => {
  console.log('是否重置了', newVal)
  if (newVal) {
    formData.value = {
      inputVal: '',
      dateVal: '',
      selectVal: '',
      cascaderVal: '',
      numVal: ''
    }
  }
})
const state = reactive({
  id: props.custom.id,
  type: props.custom.type,
  key: props.custom.key,
  priority: props.custom.priority,
  name: props.custom.name,
  options: props.custom.options,
  valueFormat: props.custom.valueFormat,
  placeholder: `请选择${props.custom.name}`,
  inputPlaceholder: `请输入${props.custom.name}`
})

console.log('传回来的参数', state)
const EmitValue = reactive({})
// select选择的值
const handleChange = (value, key) => {
  console.log('选择了谁', value, key)
  let newkey = key
  EmitValue[newkey] = value
  emit('changeVal', EmitValue)
}
// cascader选择的值
const cascaderChange = (value, key) => {
  let newkey = key
  EmitValue[newkey] = value.join(',')
  console.log('触发了没', value)
  console.log('触发了没key', key)
  emit('changeVal', EmitValue)
}
//时间日期格式
const dateChange = (value, key) => {
  console.log('调回的值', value)
  console.log('调回的值Key', key)
  let newkey = `${key}Start`
  let lastKey = `${key}End`
  let queryParams = {}
  if (value === null) {
    console.log('dateChange', value)
    queryParams = {
      queryParams: {
        [newkey]: '',
        [lastKey]: ''
      }
    }
  } else {
    queryParams = {
      queryParams: {
        [newkey]: value[0],
        [lastKey]: value[1]
      }
    }
  }

  console.log('真的啊', queryParams)
  emit('changeVal', queryParams)
}
const deleteInput = (item) => {
  console.log('点击了', item)
  emit('closeId',item)
}
// input选择的值
const inputChange = (e) => {
  console.log('输入框的值', e)
  let newkey = e.target.id
  EmitValue[newkey] = e.target.value
  emit('changeVal', EmitValue)
}
const numberInputChange = (value, key) => {
  console.log('number输入的值',value, key)
  let newkey = key
  EmitValue[newkey] = value
  emit('changeVal', EmitValue)
}
</script>

<style lang="scss" scoped>
.search-item-list {
  margin-left: 10px;
  border: 1px solid #DCDEE0;
  height: 34px;
  line-height: 32px;
  display: flex;
  width: 330px;
  margin-bottom: 24px;
  position: relative;
  font-size: 14px;
  &:hover {
    .close-btn {
      display: block;
      position: absolute;
      top: -10px;
      right: -6px;
      width: 15px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      background: rgba(54, 52, 52, 0.5);
      border-radius: 50%;
      color: #fff;
      font-size: 8px;
      cursor: pointer;
    }
  }
  .search-label {
    display: block;
    line-height: 32px;
    color: #2C3749;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding:0 12px;
    //width: 100%;
    text-align: left;
  }
  .search-other-label {
    width: 101px;
  }
  .search-other-more {
    width: 120px;
  }
  .search-input {
    width: 247px;
    text-align: left;
  }

  .close-btn {
    display: none;
    position: absolute;
    top: -10px;
    right: -6px;
    width: 12px;
    height: 12px;
    line-height: 15px;
    text-align: center;
    background: rgba(54, 52, 52, 0.5);
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
  }
}
.search-item-others {
  //width: 455px;
  .search-others {
    //width: 355px;
    text-align: left;
  }
}
.search-item-checkbox {
  //height: 80%;
}
</style>
